Position of Germany: lively.pt(263.4,539.5)
Year: 1992
X-Data of Germany: 20685.689979311
Y-Data of Germany: 80282985
Total 15+ unemployment (%)
Total 15-24 unemployment (%)
Income per person (fixed 2000 US$)
Total population
Total 15+ unemployment (%)
Total 15-24 unemployment (%)
Income per person (fixed 2000 US$)
Total population
Total 15+ unemployment (%)
Total 15-24 unemployment (%)
Income per person (fixed 2000 US$)
Total population
This is a constraint-based recreation of the gapminder visualization. There is only very little example data. The example data can be switched around to map to x or y axis or size.
Use the slider to see different years. There is a legend that tracks the current year and the data for Germany.
Note that the visualization is very slow, because the rendering process is not optimized at all - be patient when dragging the slider.
The constraints in this example are on each bubble, just saying that position and size should equal their data for the given year. The slider manipulates the year imperatively, and the system responds by re-satisfying the constraints (and thus moving and resizing all the bubbles). This is very close to a simple reactive system. However, since these are bi-directional constraints, one could extend this system easily to allow the user to drag a point and then the solver will find the right year for that position (and update all other bubbles in response).
// changed at Thu Jan 29 2015 11:39:50 GMT+0100 (Central Europe Standard
Time) by timfelgentreff
this.addScript(function reset() {
var g = this.get("Graph")
always: {
solver: g.deltablue
this.getPosition().equals(pt(
g.mapToX(g.xData()[this.name][g.year()]),
g.mapToY(g.yData()[this.name][g.year()])
));
}
always: {
solver: g.deltablue
this.getExtent().equals(pt(
g.mapToSize(g.sizeData()[this.name][g.year()]),
g.mapToSize(g.sizeData()[this.name][g.year()])
));
}
});
<lively.morphic.Morph#B291F... - Country>
Tag:
run
save
Tests
-- ALL --
reset
Scripts
-
+
-
Connections
+
-- ALL --
all
ObjectEditor -- Country>>reset
X
–
Menu